<template>
  <borderbox
    :bordermodel="bordermodel"
    :height="vheight"
    :title="title"
    :iconclass="iconclass"
    :iconcolor="iconcolor"
    :titlecolor="titlecolor"
    :decorationmodel="decorationmodel"
  >
    <dv-active-ring-chart
      ref="charts"
      :config="config"
      :id="controlid"
      :style="{
        float: 'left',
        width: '100%',
        height: title === '' ? '100% ' : 'calc(100% - 40px)'
      }"
    />
  </borderbox>
</template>
<script>
/* eslint-disable */
import elementResizeDetectorMaker from 'element-resize-detector'
import borderbox from '@/components/borderbox/index.vue'
export default {
  name: 'activeringchart',
  components: { borderbox },
  watch: {
    height(val) {
      if (val !== undefined && val !== '') {
        if (typeof val === 'number') {
          this.vheight = val + 'px'
          this.eheight = val - 30 + 'px'
        } else if (this.isNumber(val)) {
          this.vheight = val + 'px'
          this.eheight = parseInt(val) - 30 + 'px'
        } else {
          this.vheight = val
        }
      }
    }
  },
  props: [
    'options',
    'height',
    'bordermodel',
    'title',
    'iconclass',
    'iconcolor',
    'titlecolor',
    'decorationmodel'
  ],
  mounted() {
    if (this.height !== undefined && this.height !== '') {
      if (typeof this.height === 'number') {
        this.vheight = this.height + 'px'
        this.eheight = this.height - 30 + 'px'
      } else if (this.isNumber(this.height)) {
        this.vheight = this.height + 'px'
        this.eheight = parseInt(this.height) - 30 + 'px'
      } else {
        this.vheight = this.height
      }
    }
    const _this = this
    const erd = elementResizeDetectorMaker()
    erd.listenTo(document.getElementById(this.controlid), () => {
      _this.$nextTick(() => {
        _this.resize()
      })
    })
  },
  created() {
    this.controlid =
      'div' + Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)
  },
  methods: {
    isNumber(val) {
      const regPos = /^\d+(\.\d+)?$/ // 非负浮点数
      const regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/ // 负浮点数
      if (regPos.test(val) || regNeg.test(val)) {
        return true
      }
      return false
    },
    resize() {
      this.$refs.charts.chart.resize()
    }
  },
  data() {
    return {
      controlid: '',
      vheight: '230px',
      eheight: '200px',
      config: {
        data: [
          {
            name: '周口',
            value: 55
          },
          {
            name: '南阳',
            value: 120
          },
          {
            name: '西峡',
            value: 78
          },
          {
            name: '驻马店',
            value: 66
          },
          {
            name: '新乡',
            value: 80
          }
        ]
      }
    }
  }
}
</script>
